<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Gallery</title>
    <link rel="stylesheet" href="./style.css" />

    <style>
      .overlay {
        display: none;

        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;

        z-index: 2;

        background-color: rgba(0, 0, 0, 0.7);
      }

      .overlay.open {
        display: grid;
        justify-content: center;
        align-items: center;
      }

      .overlay .overlay-inner {
        background-color: white;
        width: 700px;
        padding: 20px;
      }

      .overlay .overlay-inner button {
        background-color: transparent;
        border: none;
        outline: none;

        cursor: pointer;
      }

      .overlay .overlay-inner img {
        width: 100%;
      }

      .gallery {
        display: grid;
        grid-template-columns: repeat(10, 100px);
        grid-auto-rows: 100px;
        grid-auto-flow: row dense;
      }

      .gallery-img {
        width: 100%;
        position: relative;

        overflow: hidden;
      }

      .gallery-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .gallery-img.h1 {
        grid-column: span 1;
      }

      .gallery-img.h2 {
        grid-column: span 2;
      }

      .gallery-img.h3 {
        grid-column: span 3;
      }

      .gallery-img.h4 {
        grid-column: span 4;
      }

      .gallery-img.v1 {
        grid-row: span 1;
      }

      .gallery-img.v2 {
        grid-row: span 2;
      }

      .gallery-img.v3 {
        grid-row: span 3;
      }

      .gallery-img.v4 {
        grid-row: span 4;
      }

      .gallery-view-mask {
        /* display: none; */

        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;

        background-color: #ffc60032;

        display: grid;
        justify-content: center;
        align-items: center;

        transition: top 0.5s;
      }

      .gallery-view-mask button {
        color: white;
        background-color: transparent;

        outline: none;
        border: 1px solid var(--yellow);

        font-size: 1.5rem;
        cursor: pointer;
        padding: 5px;
      }

      .gallery-img:hover .gallery-view-mask {
        top: 0;
      }
    </style>
  </head>
  <body>
    <div class="overlay">
      <div class="overlay-inner">
        <button class="overlay-close" onclick="closePreview()">close</button>
        <img class="overlay-img" src="" alt="" />
      </div>
    </div>

    <section class="gallery"></section>

    <script>
      const gallery = document.querySelector(".gallery");
      const overlay = document.querySelector(".overlay");
      const overlayImg = overlay.querySelector(".overlay-img");
      const overlayClose = overlay.querySelector(".overlay-close");

      function generateHtml([h, v]) {
        return `
          <div class="gallery-img h${h} v${v}">
            <img src="images/${randomNumbers(10)}.jpg" alt="img"/>
            <div class="gallery-view-mask">
              <button>查看 -></button>
            </div>
          </div>
        `;
      }

      function randomNumbers(limit) {
        return Math.floor(Math.random() * limit) + 1;
      }

      function previewImage(e) {
        const src = e.currentTarget.querySelector("img").src;
        console.log(src);
        overlay.classList.add("open");
        overlayImg.src = src;
      }

      function closePreview() {
        overlay.classList.remove("open");
      }

      const digits = Array.from({ length: 50 }, () => [
        randomNumbers(4),
        randomNumbers(4),
      ]).concat([
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
        [1, 1],
      ]);
      const html = digits.map(generateHtml).join("");
      gallery.innerHTML = html;

      const galleryImgs = document.querySelectorAll(".gallery-img");
      galleryImgs.forEach((img) => {
        img.addEventListener("click", previewImage);
      });
    </script>
  </body>
</html>
